import { Component } from 'react';

import { Map,InfoWindow } from 'react-amap';
import { PositionPicker,Wrapper,PoiPicker } from 'react-amapui-wrapper';

import './PageHome.less';

export default class PageHome extends Component {

  constructor(props){
    super(props);
    
    this.state = {
      position:'',
      address:'',
      mapInstance:null,
      offset: [10, -10],
      visible:false,
      readOnly:this.props.readOnly
    };
    let t= this;
    this.amapEvents = {
      created: (mapInstance) => {
          t.setState({
            mapInstance:mapInstance
          })
          if(this.props.longitude != null && this.props.longitude != "" && this.props.latitude != null && this.props.latitude != ""){
            t.mapCenter = {longitude: t.props.longitude, latitude: t.props.latitude};
          }else{
            AMap.plugin('AMap.Geolocation', function() {
              var geolocation = new AMap.Geolocation({
                  timeout: 10000,          //超过10秒后停止定位，默认：5s
                  buttonPosition:'LB',    //定位按钮的停靠位置
                  buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                  zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                  noGeoLocation: 1,
                  showMarker:false
              });
              mapInstance.addControl(geolocation);
              geolocation.getCurrentPosition(function(status,result){
                  if(status=='complete'){
                    t.mapCenter = result.position;
                    // alert(result.position);
                  }else{
                      console.log('定位失败');
                      console.log('失败原因排查信息:'+result.message);
                  }
              });
            })
          }
      }
    };
    this.positionPickerevents = {
      created: (positionPicker) => { 
        positionPicker.on('success', function(positionResult) {
          // console.log(positionResult);
          t.setState({
            visible:false,
            position:positionResult.position,
            address:positionResult.address,
          },()=>{
            t.setState({
                visible:true,
            })
          })
        });
        positionPicker.on('fail', function(positionResult) {
          t.setState({
            what:'获取位置失败'
          })
        });
      }
    }

    this.poiPickerEvents = {
      created: (poiPicker) => { 
        var mapInstance = t.state.mapInstance;
        //初始化poiPicker
        window.poiPicker = poiPicker;
        var marker = new AMap.Marker();
        //选取了某个POI
        poiPicker.on('poiPicked', function(poiResult) {
            var poi = poiResult.item;
            marker.setMap(mapInstance);
            marker.setPosition(poi.location);
            mapInstance.setCenter(marker.getPosition());
        });
      }
    }
  }

  confirm(){
    if(this.props.getPosition){
        this.props.getPosition(this.state.position, this.state.address);
    }
  }

  getScrollHigh(){
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    var winHeight = '';
    if(isAndroid==true){
        winHeight = $(window).height() + "px";
    }else if(isiOS==true){
        var high = window.screen.availHeight - 46;
        winHeight = high + "px";
    }
    return winHeight;
  }

  render(){
    let height = this.getScrollHigh();
    return (
        <div>
            <div id="pickerBox">
                <input id="pickerInput" placeholder="输入关键字选取地点" />
                {this.state.readOnly ? "" :
                  <button type="button" id="btn-confirm" onClick={this.confirm.bind(this)}>确定</button>
                }
            </div>
            <div style={{width: '100vw', height: height}}>
                <Map 
                zoom={17} 
                useAMapUI = {true}
                center={this.mapCenter}
                events={this.amapEvents}> 
                <InfoWindow
                    autoMove={false}
                    offset={this.state.offset}
                    position={this.state.position}
                    content={this.state.address}
                    visible={this.state.visible}
                    isCustom={false}
                    closeWhenClickMap={true}
                />            
                <Wrapper>
                    <PositionPicker
                    events = {this.positionPickerevents}
                    eventSupport = {true}
                    instanceName = {'PositionPicker'}
                    />
                    <PoiPicker
                    events = {this.poiPickerEvents}
                    eventSupport = {true}
                    instanceName = {'PoiPicker'}
                    />
                </Wrapper>
                </Map>
            </div>
        </div>
    )
  }
}